<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>

<head>
<c:if test="${sessionScope.loginMember == null }">
	<jsp:forward page="loginPage.sds"></jsp:forward>
</c:if>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>StepUp-Donation</title>

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.css" rel="stylesheet">

<link href="css/animate.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">

</head>

<body>

	<div id="wrapper">

		<!-- 사이드바 -->
		<nav class="navbar-default navbar-static-side" role="navigation">
			<div class="sidebar-collapse">
				<ul class="nav" id="side-menu">
					<li class="nav-header">
						<div class="dropdown profile-element">
							<span> <c:if
									test="${sessionScope.loginMember.mimage == null}">
									<img alt="image" class="img-circle"
										src="imgUpload/anonymous.jpg" width="160px" />
								</c:if> <c:if test="${sessionScope.loginMember.mimage != null}">
									<img alt="image" class="img-circle"
										src="imgUpload/${sessionScope.loginMember.mimage}"
										width="160px" />
								</c:if>
							</span> <a data-toggle="dropdown" class="dropdown-toggle" href="#">
								<span class="clear"> <span class="block m-t-xs"> <strong
										class="font-bold">${sessionScope.loginMember.mname}</strong>
								</span> <span class="text-muted text-xs block">
										${sessionScope.loginMember.mposition} <b class="caret"></b>
								</span>
							</span>
							</a>
							<ul class="dropdown-menu animated fadeInRight m-t-xs">
								<li><a href="profile.html">Profile</a></li>
								<li class="divider"></li>
								<li><a href="logout.sds">Logout</a></li>
							</ul>
						</div>
					</li>
					<!-- 메뉴 리스트 -->
					<li><a href="index.sds"><i
							class="fa fa-bar-chart-o"></i> <span class="nav-label">Statistics</span></a></li>
					<li><a href="stepup_rank.sds"><i class="fa fa-flask"></i>
							<span class="nav-label">Ranking</span></a></li>
					<li><a href="stepup_badge.sds"><i class="fa fa-desktop"></i>
							<span class="nav-label">Badge</span></a></li>
					<li><a href="stepup_mission.sds"><i
							class="fa fa-envelope"></i> <span class="nav-label">Mission</span></a></li>
					<li><a href="stepup_temp.sds"><i class="fa fa-sitemap"></i>
							<span class="nav-label">Thermometer</span></a></li>
					<li class="active"><a href="stepup_donation.sds"><i class="fa fa-globe"></i>
							<span class="nav-label">Donation</span></a></li>
				</ul>
			</div>
		</nav>

		<div id="page-wrapper" class="gray-bg">
		
			<!-- 상단 메뉴 바 -->
			<div class="row border-bottom">
				<nav class="navbar navbar-static-top  " role="navigation"
					style="margin-bottom: 0">
					<div class="navbar-header">
						<a class="navbar-minimalize minimalize-styl-2 btn btn-primary "
							href="#"><i class="fa fa-bars"></i> </a>
						<form role="search" class="navbar-form-custom" method="post"
							action="search_results.html">
							<div class="form-group">
								<input type="text" placeholder="Search for something..."
									class="form-control" name="top-search" id="top-search">
							</div>
						</form>
					</div>
					
					<!-- 상단 메뉴 - 검색, 로그아웃 포함 -->
					<ul class="nav navbar-top-links navbar-right">
						
						<!-- 상단: 로그인, 로그아웃 버튼 -->
						<c:if test="${sessionScope.loginMember != null}">
							<li><a href="stepup_profile.sds"><i class="fa fa-sign-out"></i>
								Profile
							</a></li>
							<li><a href="logout.sds"> <i class="fa fa-sign-out"></i>
								Logout
						</a></li>
						</c:if>
					</ul>
				</nav>
			</div>
			
			<!-- 메인 페이지 : 제목 -->
			<div class="row wrapper border-bottom white-bg page-heading">
				<div class="col-sm-4">
					<h2>기부 하기</h2>
					<ol class="breadcrumb">
						<li>Home</li>
						<li class="active"><strong>기부하기</strong></li>
					</ol>
				</div>
				<div style="padding: 20px 30px 0px 0px">
					<img alt="image" class="img-responsive" src="img/logo.jpg"
					 style="Height: 80px; width: 80px;" align="right"  >
				</div>
			</div>
			
			<!-- 기부 모아보기 -->
			<div class="row">
				<div class="col-lg-12">
					<div class="wrapper wrapper-content animated fadeInUp">
						
						<div class="ibox-content m-b-sm border-bottom">
                            <div class="p-xs" id="myredbean">
                                
                            </div>
                        </div>
						
						<div class="ibox">
							<div class="ibox-title">
								<h5>기부 팥 모금함: 함께 나누면 더욱 따듯해집니다.</h5>
							</div>
							<div class="ibox-content">
								<div class="project-list">
									<table class="table table-hover">
										<thead>
											<tr>
												<th>진행여부</th>
												<th>기부 제목</th>
												<th>달성율</th>
												<th>팥 개수</th>
												<th>현재팥 / 목표팥</th>
												<th>기부하기</th>
											</tr>
										</thead>
										<tbody id="organlist">
										</tbody>
									</table>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			
			<!-- 하단 부분 : footer -->
			<div class="footer">
				<div align="right">
					StepUp System. Copyright <strong> &copy; SHINHAN DATA SYSTEM.</strong> All Right Reserved. 2015.
				</div>
			</div>

		</div>
	</div>

	<!-- Mainly scripts -->
	<script src="js/jquery-2.1.1.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/plugins/metisMenu/jquery.metisMenu.js"></script>
	<script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>

	<!-- Custom and plugin javascript -->
	<script src="js/inspinia.js"></script>
	<script src="js/plugins/pace/pace.min.js"></script>

	<script>
		$(document).ready(function() {
			
			$.ajax({
				url : "stepup_donation_list.sds",
				type : "post",
				async : false,
				dataType : "json",
				success : function(data){
					
					$("#myredbean").append(
							"<div class='pull-left m-r-md'>"+
                            	"<i class='fa fa-globe text-navy mid-icon'>"+"</i>"+
                        	"</div>"+
                        	"<h2>"+"내 팥의 개수 : "+ data.memberredbean.mredbean+" 개"+"</h2>"+
                        	"<span>"+ "내가 가지고 있는 팥을 기부해 보세요. 좋은 일이 일어납니다^^"+"</span>"
					);
					
					$.each(data.organizationlist, function(index, item){
						var percent = (item.ocredbean/item.oredbean)*100;
						var num = 0;
						
						$("#organlist").append(
							"<tr>"+
								"<td class='project-status' id='goal"+index+"'>"+
								"</td>"+
								"<td class='project-title'>"+
									"<a href='stepup_donationdetail.sds?ono="+item.ono+"'>"+item.otitle+"</a>"+ "<br/>"+
									"<small>"+item.oname+"</small>"+
								"</td>"+
								"<td class='project-completion'>"+
									"<small>"+"Completion with: "+percent.toFixed(2)+"%"+"</small>"+
									"<div class='progress progress-mini'>"+
										"<div style='width:"+percent.toFixed(0)+"%;' class='progress-bar'>"+"</div>"+
									"</div>"+
								"</td>"+
								"<td class='project-people' id='redbean"+index+"'>"+
								"</td>"+
								"<td class='project-actions'>"+
									"<h3>"+item.ocredbean+"/"+item.oredbean+"</h3>"+
								"</td>"+
								"<td id='donationBtn"+index+"'>"+
								"</td>"+
							"</tr>"
						);
						
						if(item.ocredbean != item.oredbean){
							$("#donationBtn"+index).append(
									"<a class='btn btn-primary btn-rounded' href='stepup_donationdetail.sds?ono="+item.ono+"'>"+"Donation"+"</a>"
							);
						} else {
							$("#donationBtn"+index).append(
								"<a class='btn btn-default btn-rounded'>"+"Completed"+"</a>"
							);
						}
						
						if(percent.toFixed(0)>=0 && percent.toFixed(0)<20){
							$("#redbean"+index).append(
								"<img alt='image' class='img-circle' src='img/redbean.jpg'>"
							);
						} else if (percent.toFixed(0)>=20 && percent.toFixed(0)<40){
							$("#redbean"+index).append(
								"<img alt='image' class='img-circle' src='img/redbean.jpg'>"+
								"<img alt='image' class='img-circle' src='img/redbean.jpg'>"
							);
						} else if (percent.toFixed(0)>=40 && percent.toFixed(0)<60){
							$("#redbean"+index).append(
								"<img alt='image' class='img-circle' src='img/redbean.jpg'>"+
								"<img alt='image' class='img-circle' src='img/redbean.jpg'>"+
								"<img alt='image' class='img-circle' src='img/redbean.jpg'>"
							);
						} else if (percent.toFixed(0)>=60 && percent.toFixed(0)<80){
							$("#redbean"+index).append(
								"<img alt='image' class='img-circle' src='img/redbean.jpg'>"+
								"<img alt='image' class='img-circle' src='img/redbean.jpg'>"+
								"<img alt='image' class='img-circle' src='img/redbean.jpg'>"+
								"<img alt='image' class='img-circle' src='img/redbean.jpg'>"
							);
						} else if (percent.toFixed(0)>=80 && percent.toFixed(0)<=100){
							$("#redbean"+index).append(
								"<img alt='image' class='img-circle' src='img/redbean.jpg'>"+
								"<img alt='image' class='img-circle' src='img/redbean.jpg'>"+
								"<img alt='image' class='img-circle' src='img/redbean.jpg'>"+
								"<img alt='image' class='img-circle' src='img/redbean.jpg'>"+
								"<img alt='image' class='img-circle' src='img/redbean.jpg'>"
							);
						}
						
						if(percent.toFixed(0)==100){
							$("#goal"+index).append(
									"<span class='label label-default'>"+"기부완료"+"</span>"
							);
						} else {
							$("#goal"+index).append(
								"<span class='label label-primary'>"+"진행중"+"</span>"
							);
						}
						
					});
				},
				error : function(){
					alert("실패: " + data.status);
				}
			});
			

			$('#loading-example-btn').click(function() {
				btn = $(this);
				simpleLoad(btn, true)

				simpleLoad(btn, false)
			});
		});

		function simpleLoad(btn, state) {
			if (state) {
				btn.children().addClass('fa-spin');
				btn.contents().last().replaceWith(" Loading");
			} else {
				setTimeout(function() {
					btn.children().removeClass('fa-spin');
					btn.contents().last().replaceWith(" Refresh");
				}, 2000);
			}
		}
	</script>
</body>
</html>
